<template>
  <div class="right-container borderStyle">
    <div class="right-container borderStyle" v-if="isTogg==='qqqqq'">
      <template v-if="this.isShow==='fzjk'">
        <RightHome />
      </template>
      <template v-if="this.isShow==='zxjc'">
        <RightPage />
      </template>
      <template v-if="this.isShow==='jqr'">
        <RightRobot />
      </template>
      <template v-if="this.isShow==='sxt'">
        <RightCamera />
      </template>
      <template v-if="this.isShow==='qt'">
        <RightQt :isTogg="isTogg" @changeIsTogg="changeIsTogg" />
      </template>
    </div>
    <div class="right-container borderStyle" v-if="isTogg==='wwwww'">
      <RightDeviceStatistics @changeIsToggBack="changeIsToggBack" />
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop } from "vue-property-decorator";
import RightHome from "./RightFzjk/RightFzjkHome.vue";
import RightPage from "./RightZxjc/RightZxjc.vue";
import RightRobot from "./RightRobot/RightRobotDetails.vue";
import RightCamera from "./RightCamera/RightCameraDetails.vue";
import RightQt from "./RightQt/RightQtDetails.vue";
import RightDeviceStatistics from "./RightQt/RightDeviceStatistics.vue";
import { log } from "three";
@Component({
  components: {
    RightHome,
    RightPage,
    RightRobot,
    RightCamera,
    RightQt,
    RightDeviceStatistics,
  },
})
export default class extends Vue {
  public isTogg: string = "qqqqq";
  @Prop({ type: String })
  isShow: any;
  @Prop({ type: String })
  leftTreeId!: String;

  changeIsTogg() {
    this.isTogg = "wwwww";
  }
  changeIsToggBack() {
    this.isTogg = "qqqqq";
  }
}
</script>

<style lang="scss" scoped>
.right-container {
  width: 100%;
  height: 100%;
  // padding-bottom: 0.2rem;
}
</style>

